<form class="form-horizontal" id="form-add" style="margin: 20px;">        
    <div class="form-group">
        <label class="control-label col-sm-2">Code</label>
        <div class="col-sm-5">
            <div class="form-control-static" ><%= data.code %></div>
        </div>
    </div>
    <table class="table table-striped table-bordered tbl-new table-responsive">
        <thead>
            <tr class="warning">
                <th class="text-center" style="font-size: 14px;">Source</th>
                <th class="text-center" style="font-size: 14px;">Role</th>
                <th class="text-center" style="font-size: 14px;">Functionality</th>
            </tr>
        </thead>   
        <tbody>
            <tr>
        <input type="hidden" name="administratorId" value="<%= data.id%>">
        <td class="text-center">
            <select name="sourceId" class="form-control"  placeholder="Source" data-info="source" >
                <option value="">---Source---</option>
            </select>
        </td>
        <td class="text-center">
            <select name="role" class="form-control">
                <option value="">--Select--</option>
                <option value="1">Search</option>
                <option value="2">Get</option>
                <option value="3">Save</option>
                <option value="4">Delete</option>
            </select>
        </td>
        <td class="text-center">
            <button type="button" style="margin-top: 7px;" class="btn btn-xs btn-success" onclick="administrator.addApi();">Add</button>
        </td>
        </tr>
        </tbody>
    </table>
    <table class="datatables table table-striped table-bordered  table-responsive" id="sortProperty">
        <thead>
            <tr class="success">
                <th class="text-center" style="font-size: 14px;">Email</th>
                <th class="text-center" style="font-size: 14px;">Source</th>
                <th class="text-center" style="font-size: 14px;">Role</th>
                <th class="text-center" style="width: 250px; font-size: 14px;">Functionality</th>
            </tr>
        </thead>   
        <tbody>
            <tr data-key=""></tr>
            <% $.each(data['api'], function(i){ %>
            <tr data-key="<%=this.sourceId%>">
                <td class="text-center">
                    <%= this.administratorId%>
                </td>
                <td class="text-center">
                    <%= this.sourceId%>
                </td>
                <td class="text-center">
                    <%= this.role%>
                </td>
                <td class="text-center" style="width: 250px;">
                    <div class="btn-group">
                        <button style="margin-top: 7px;" type="button" class="btn btn-xs btn-danger" onclick="administrator.removeApi('<%= this.administratorId %>', '<%= this.sourceId %>')">Remove</button>
                    </div>
                </td>
            </tr>
            <% });%>
        </tbody>
    </table>  
</div>